<template>
    <view>
        <view class="absolute bg-blackx w-full min-h-full box-border" id="container">
            <view class="w-full box-border flex items-center gap-2 px-4 pt-8">
                <uv-avatar v-if="post.user?.sex_name" :icon="post.user?.sex_name"
                    :bgColor="post.user?.sex_color"></uv-avatar>
                <view class="flex flex-col">
                    <text selectable class="text-base text-whitexlight">
                        {{post?.avatar?.nickname??'注册用户'+post.user_id??''}}
                    </text>
                    <view class="flex">
                        <text selectable class="text-xs text-whitexlight">{{post.created_at_human}}</text>
                        <text class="text-xs text-whitexlight ml-2">{{post?.location_name}}</text>
                    </view>
                </view>
            </view>
            <view class="px-4 pt-4 box-border">
                <text class="text-whitex whitespace-pre-wrap break-words">{{post.content}}</text>
                <text v-if="post.tag?.name" class="text-bluex text-base block"># {{post.tag?.name}}</text>
            </view>
            <view class="px-4 pt-4 box-border flex flex-col items-center" v-if="!auditing">
                <view @click="postLike()" :class="heartBeat?'animate__rubberBand':''" class="animate__animated">
                    <uv-icon name="heart-fill" :color="pinkx" size="60"></uv-icon>
                </view>
            </view>
            <view class="px-4 pt-4 box-border">
                <view class="border-0 border-b-2 border-solid border-whitexlight pb-2 flex justify-between">
                    <text class="text-whitexlight text-xs">回复 <text v-if="post.comment_num">{{post.comment_num}}</text>
                    </text>
                    <text class="text-whitexlight text-xs" v-if="!auditing">传信
                        <text v-if="post.like_num">{{post.like_num}}</text>
                    </text>
                </view>
            </view>
            <view class="px-4 pt-4 pb-16 box-border flex flex-col gap-4">
                <view class="w-full flex gap-2" v-for="i in comment_list" :key="i.id">
                    <!-- 头像 -->
                    <uv-avatar v-if="i.user?.sex_name" :icon="i.user?.sex_name"
                        :bgColor="i.user?.sex_color"></uv-avatar>
                    <!-- 评论 -->
                    <view class="flex flex-col gap-2 w-full">
                        <text class="text-whitexlight text-base">{{i.avatar_nickname??'注册用户'+(i.user?.id??'')}}</text>
                        <view class="flex flex-row flex-wrap gap-2 items-center" @click="toComment(i)">
                            <text class="text-whitex">
                                <text v-if="i.to_avatar_nickname && i.to_user_id!=post.user_id">
                                    回复
                                </text>
                                <text v-if="i.to_avatar_nickname && i.to_user_id!=post.user_id"
                                    class="text-whitexlight">
                                    {{i.to_avatar_nickname}}:
                                </text>
                                {{i.content}}
                                <text class="text-whitexlight text-nowrap text-sm">{{i.created_at_human}} 回复</text>
                            </text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="fixed bottom-0 box-border w-full bg-blackxlight py-2">
                <view
                    class="box-border mx-4 bg-black pl-3 pr-2 rounded-3xl flex flex-row gap-2 justify-center items-center">
                    <textarea v-model="comment" @click="showNicknamePopup"
                        class="py-2 text-whitex text-sm placeholder:text-sm"
                        :placeholder="page_config.comment_placeholder||page_config.default_comment_placeholder"
                        :auto-height="true" :cursor-spacing="20" :show-confirm-bar="false"
                        :disabled="!this.avatar?.avatar_id&&!auditing" :focus="commentFocus"
                        @blur="onCommentBlur"></textarea>
                    <view @click="doComment"
                        class="text-xs text-whitex bg-bluex rounded-full px-2 py-1 flex-shrink-0 flex-grow-0">
                        发 送
                    </view>
                </view>
            </view>
            <sexPopup ref="sexPopup"></sexPopup>
            <nicknamePopup ref="nicknamePopup" @onChooseNickname="onChooseNickname"></nicknamePopup>
        </view>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        avatarPost,
        commentList,
        detailPageData,
        inboxGet,
        postComment,
        postDetail,
        postLike,
        sensitive,
        sensitiveWechat,
        setPostAvatar
    } from '../../http/api';

    export default {
        data() {
            return {
                pinkx: colors.pinkx,
                bluex: colors.bluex,
                id: '',
                comment: '',
                post: {
                    user_id: '',
                    content: "",
                    created_at_human: "",
                    like_num: '',
                    comment_num: '',
                    avatar: {
                        nickname: ""
                    },
                    user: {
                        sex_name: "warning"
                    },
                    tag: {
                        name: '',
                    }
                },
                heartBeat: false,
                user: {
                    id: 0,
                    sex: 0,
                },
                avatar: {
                    avatar_id: 0,
                },
                comment_list: [],
                auditing: true,
                commentFocus: false,
                page_config: {
                    default_comment_placeholder: '',
                    comment_placeholder: '',
                    comment_uploading_text: '提交中...',
                },
                form: {
                    parent_id: 0,
                    to_id: 0,
                    to_user_id: 0,
                },
            }
        },
        methods: {
            onCommentBlur() {
                setTimeout(() => this.commentRest(), 500)
            },
            commentRest() {
                console.log("comment reset");
                this.page_config.comment_placeholder = ''
                this.form.parent_id = 0
                this.form.to_id = 0
                this.form.to_user_id = 0
            },
            toComment(e) {
                const to_nickname = e.avatar_nickname
                this.page_config.comment_placeholder = `回复 ${to_nickname}`
                this.form.to_id = e.id
                this.form.to_user_id = e.user_id
                this.form.parent_id = e.parent_id || e.id
                this.commentFocus = true
            },
            async onChooseNickname(e) {
                console.log(e);
                const res = await setPostAvatar({
                    post_id: this.id,
                    avatar_id: e.id
                })
                console.log(res);
                uni.showToast({
                    icon: 'success',
                    title: res.message
                })
                await this.getAvatarByPost()
            },
            showSexPopup() {
                this.$refs.sexPopup.open("bottom")
            },
            async postLike() {
                this.heartBeat = true
                setTimeout(() => this.heartBeat = false, 1000)
                const res = await postLike({
                    id: this.id
                })
                console.log(res);
                this.post.like_num = res.data.like_num
            },
            async getAvatarByPost() {
                if (this.auditing) {
                    return;
                }
                if (this.avatar.avatar_id) {
                    return
                }
                let res = await avatarPost({
                    post_id: this.id
                })
                console.log('avatar_post', res);
                const data = res.data
                this.avatar = data.avatar

            },
            showNicknamePopup() {
                if (this.auditing) {
                    return;
                }
                if (!this.avatar.avatar_id) {
                    console.log('showNicknamePopup');
                    this.$refs.nicknamePopup.open('bottom')
                    return
                }
                console.log('no need showNicknamePopup');
            },
            async getData() {
                const id = this.id
                const res = await postDetail({
                    id
                })
                const data = res.data
                this.post = data
                console.log(res);
            },
            async pageData() {
                const res = await detailPageData({
                    post_id: this.id,
                });
                const data = res.data
                console.log(data);
                this.user = data.user
                this.auditing = data.auditing
                if (data.page_config) {
                    this.page_config = data.page_config
                }
                if (this.user.sex == 0 && !this.auditing) {
                    this.showSexPopup()
                }
                if (this.auditing) {
                    uni.setNavigationBarTitle({
                        title: "笔记详情"
                    })
                }
            },
            async testSensitive(question, scene_name) {
                // #ifdef MP-WEIXIN
                const res = await sensitiveWechat({
                    question,
                    scene_name
                })
                // #endif
                // #ifndef MP-WEIXIN
                const res = await sensitive({
                    question
                })
                // #endif
                if (res.Hit) {
                    uni.showToast({
                        icon: "none",
                        title: res.message ?? "此内容不适合发布",
                    })
                }
                return res.Hit
            },
            toBottom() {
                uni.createSelectorQuery()
                    .in(this)
                    .select("#container")
                    .boundingClientRect((data) => {
                        console.log('rect', data);
                        this.$nextTick(() => {
                            uni.pageScrollTo({
                                scrollTop: data.height,
                            })
                        })
                    })
                    .exec()
            },
            async doComment() {
                uni.showLoading({
                    title: this.page_config?.comment_uploading_text ?? "提交中..."
                })
                const params = {
                    post_id: this.id,
                    content: this.comment,
                    ...this.form,
                }
                const hit = await this.testSensitive(this.comment, 'comment')
                if (hit) {
                    uni.hideLoading()
                    this.comment = ''
                    return;
                }
                const res = await postComment(params)
                console.log(res);
                uni.hideLoading()
                uni.showToast({
                    title: res.message,
                    icon: 'none'
                })
                if (res.code == 0) {
                    return
                }
                this.comment = ''
                await this.getData()
                await this.commentList()
                this.toBottom()

            },
            async doLike() {
                const res = await postLike({
                    id: this.id
                })
                console.log(res);
                this.post.like_num = res.data.like_num
            },
            async commentList() {
                const res = await commentList({
                    post_id: this.id
                })
                console.log(res);
                const data = res.data
                this.comment_list = data.list
            },
            async postReaded() {
                if (!this.auditing) {
                    return
                }
                console.log('reading', this.id);
                const res = await inboxGet({
                    post_id: this.id
                })
                console.log(res);
            },
        },
        async onLoad(options) {
            this.id = options.id ?? 1
            this.commentList()
            await this.getData()
            await this.pageData()
            await this.postReaded()
            await this.getAvatarByPost()
        },
    }
</script>

<style>

</style>